<template>
	<!-- #ifndef APP-NVUE || MP-TOUTIAO -->
	<view class="u-demo-block">
		<view class="container">
			<view class="nav">
				<!-- 左侧导航 -->
				<view :class="selectedNav===index?'selected':'nav-item'" v-for="(item, index) in navList" :key="index"
					@click="clickChange(index)">
					{{ item }}
				</view>
			</view>
			<view class="content">
				<!-- 右侧内容 -->
				<view>
					<view @click="gotoDetails" class="contList">
						<view class="listTit">半天陪诊(4小时)</view>
						<view>
							<view class="listBox">
								<view class="listIcon">
									<u-icon name="checkmark-circle" bold="true" color="#FF6666" size="16" top="3rpx"></u-icon>
								</view>
								<text class="iconText">半天4小时</text>
							</view>
							<view class="listBox">
								<view class="listIcon">
									<u-icon name="checkmark-circle" bold="true" color="#FF6666" size="16" top="3rpx"></u-icon>
								</view>
								<text class="iconText">1对1服务</text>
							</view>
							<view class="listBox">
								<view class="listIcon">
									<u-icon name="checkmark-circle" bold="true" color="#FF6666" size="16" top="3rpx"></u-icon>
								</view>
								<text class="iconText">诊前咨询</text>
							</view>
							<view class="listBox">
								<view class="listIcon">
									<u-icon name="checkmark-circle" bold="true" color="#FF6666" size="16" top="3rpx"></u-icon>
								</view>
								<text class="iconText">全程陪伴</text>
							</view>
							<view class="listBox">
								<view class="listIcon">
									<u-icon name="checkmark-circle" bold="true" color="#FF6666" size="16" top="3rpx"></u-icon>
								</view>
								<text class="iconText">诚信服务</text>
							</view>
						</view>
					</view>
					<view class="contList">
						<view class="listTit">全天陪诊(8小时)</view>
						<view>
							<view class="listBox">
								<view class="listIcon">
									<u-icon name="checkmark-circle" bold="true" color="#FF6666" size="16" top="3rpx"></u-icon>
								</view>
								<text class="iconText">全天8小时</text>
							</view>
							<view class="listBox">
								<view class="listIcon">
									<u-icon name="checkmark-circle" bold="true" color="#FF6666" size="16" top="3rpx"></u-icon>
								</view>
								<text class="iconText">1对1服务</text>
							</view>
							<view class="listBox">
								<view class="listIcon">
									<u-icon name="checkmark-circle" bold="true" color="#FF6666" size="16" top="3rpx"></u-icon>
								</view>
								<text class="iconText">诊前专业咨询</text>
							</view>
							<view class="listBox">
								<view class="listIcon">
									<u-icon name="checkmark-circle" bold="true" color="#FF6666" size="16" top="3rpx"></u-icon>
								</view>
								<text class="iconText">全程陪伴</text>
							</view>
							<view class="listBox">
								<view class="listIcon">
									<u-icon name="checkmark-circle" bold="true" color="#FF6666" size="16" top="3rpx"></u-icon>
								</view>
								<text class="iconText">诚信服务</text>
							</view>
						</view>
					</view>
				</view>
			</view>
		</view>
	</view>
	<!-- #endif -->
</template>

<script>
	import { mapState,mapMutations } from 'vuex'
	export default {
		data() {
			return {
				navList: ['就医陪诊', '辅助就医', '诊前咨询', '住院陪护', '代办买药', '院内服务', '送取服务'],
				selectedNav: 0
			};
		},
		computed:{
			...mapState(['ServiceIndex'])
		},
		onShow() {
			this.selectedNav = this.ServiceIndex;
		},
		methods: {
			...mapMutations(['proIndex']),
			clickChange(index) {
				this.proIndex(index);
				this.selectedNav = index
			},
			gotoDetails(){
				uni.navigateTo({
					url:'../../subpages/pages-service/details/details'
				})
			}
		}
	}
</script>

<style lang="scss">
	body {
		background: $uni-bg-color-grey;
	}

	.container {
		display: flex;
		height: 100%;
	}

	.nav {
		width: 200rpx;
		/* 左侧导航宽度 */
		background: $uni-bg-color;
		/* 左侧导航背景色 */
		height: 100vh;
		font-size: 28rpx;
		color: #606266;
	}

	.nav-item {
		padding: 40rpx 0;
		text-align: center;
		border-left: 3px #ffffff solid;
	}

	.selected {
		padding: 40rpx 0;
		text-align: center;
		background: $uni-bg-color-grey;
		color: #0782C9;
		border-left: 3px #0782C9 solid;
	}

	.content {
		flex: 1;
		padding: 20rpx;
		overflow-y: auto;
	}
	.contList{
		background: #ffffff;
		padding: 40rpx;
		border-radius: 10rpx;
		box-shadow: 3rpx 3rpx 6rpx 0 #D3D0D0;
		margin-bottom: 20rpx;
	}
	.listTit{
		font-size: 28rpx;
		font-weight: bold;
		padding-bottom: 20rpx;
	}
	.listBox{
		display: inline-block;
		margin-right: 30rpx;
	}
	.listIcon{
		display: inline-block;
	}
	.iconText{
		font-size: 24rpx;margin-left: 10rpx;
	}
</style>